<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="漫画名字" prop="comicName">
        <el-input
          v-model="queryParams.comicName"
          placeholder="请输入漫画名字"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="漫画作者" prop="comicAuthor">
        <el-input
          v-model="queryParams.comicAuthor"
          placeholder="请输入漫画作者"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="漫画分类" prop="comicCategory">
        <el-select v-model="queryParams.comicCategory" placeholder="请选择漫画分类">
          <el-option label="请选择漫画分类" value=""/>
          <el-option label="韩漫" value="韩漫"/>
          <el-option label="日漫" value="日漫"/>
          <el-option label="国漫" value="国漫"/>
        </el-select>
      </el-form-item>

      <el-form-item label="付费设置" prop="comicUnlock">
        <el-select v-model="queryParams.comicUnlock" placeholder="请选择">
          <el-option label="空" value=""/>
          <el-option label="免费" value="0"/>
          <el-option label="金币付费" value="1"/>
          <el-option label="会员免费" value="2"/>

        </el-select>
      </el-form-item>


      <el-form-item label="状态" prop="comicState">
        <el-select v-model="queryParams.comicState" placeholder="请选择漫画状态">
          <el-option label="空" value=""/>
          <el-option label="上架" value="0"/>
          <el-option label="未上架" value="1"/>

        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="comicTime">
        <el-date-picker clearable size="small"
                        v-model="queryParams.comicTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="漫画创作状态" prop="comicStateType">
        <el-select v-model="queryParams.comicStateType" placeholder="请选择漫画创作状态" clearable size="small">
          <el-option label="请选择漫画创作状态" value=""/>
          <el-option label="新作" value="1"/>
          <el-option label="连载中" value="2"/>
          <el-option label="已完结" value="3"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['xqsp:comic:add']"
        >新增
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="success"-->
      <!--          plain-->
      <!--          icon="el-icon-edit"-->
      <!--          size="mini"-->
      <!--          :disabled="single"-->
      <!--          @click="handleUpdate"-->
      <!--          v-hasPermi="['xqsp:comic:edit']"-->
      <!--        >修改</el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['xqsp:comic:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['xqsp:comic:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="comicList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="漫画id" align="center" prop="comicId"/>
      <el-table-column label="漫画名字" align="center" prop="comicName"/>
      <el-table-column label="漫画封面" align="center" prop="comicCoverImg">
        <template slot-scope="scope">
          <el-image :src="scope.row.comicCoverImg"  :preview-src-list="[scope.row.comicCoverImg]" style="width: 100px;height: 100px"/>
        </template>
      </el-table-column>
      <el-table-column label="漫画介绍" align="center" prop="comicIntroduce"/>
      <el-table-column label="漫画作者" align="center" prop="comicAuthor"/>
      <el-table-column label="漫画分类" align="center" prop="comicCategory"/>
      <el-table-column label="漫画观看人数" align="center" prop="comicWatchNumber"/>
      <el-table-column label="喜欢人数" align="center" prop="comicLikeNumber"/>
      <el-table-column label="付费设置" align="center" prop="comicUnlock"/>
      <el-table-column label="是否置顶" align="center" prop="comicTop">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.comicTop"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="是"
            inactive-value="否"
            @change="handleTopChange(scope.row)">

          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label=" 解锁一章金币数" align="center" prop="comicUnlockGlod"/>
      <el-table-column label="最新章节(上传)" align="center" prop="comicNewChapter">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-add"
            @click="handleAddChapter(scope.row)"
          >上传
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="排序" align="center" prop="comicSort"/>
      <el-table-column label="状态" align="center" prop="comicState">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.comicState"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="0"
            :inactive-value="1"
            @change="handleStatusChange(scope.row)">

          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="漫画创作状态" align="center" prop="comicStateType"/>
      <el-table-column label="漫画标签" align="center" prop="comicTag">
        <template slot-scope="scope">
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            @show="show(scope.row)"
          >
            <el-table :data="comictagList">
              <el-table-column label="标签名字" align="center" prop="comicTagName"/>
            </el-table>

            <el-button slot="reference" size="mini">查看</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="comicTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.comicTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['xqsp:comic:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['xqsp:comic:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改漫画操作对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="漫画名字" prop="comicName">
          <el-input v-model="form.comicName" placeholder="请输入漫画名字"/>
        </el-form-item>
        <el-form-item label="漫画封面" prop="comicCoverImg">
          <el-input v-model="form.comicCoverImg" placeholder="请输入漫画封面" type="textarea"/>
        </el-form-item>
        <el-form-item label="漫画介绍" prop="comicIntroduce">
          <el-input v-model="form.comicIntroduce" type="textarea" placeholder="请输入漫画简介(字数最多500字)" maxlength="500"
                    show-word-limit :autosize="{minRows:4,maxRows:10}"/>
        </el-form-item>
        <el-form-item label="漫画作者" prop="comicAuthor">
          <el-input v-model="form.comicAuthor" placeholder="请输入漫画作者"/>
        </el-form-item>
        <el-form-item label="漫画分类" prop="comicCategory">
          <el-select v-model="form.comicCategory" placeholder="请选择漫画分类">
            <el-option label="请选择漫画分类" value=""/>
            <el-option label="韩漫" value="韩漫"/>
            <el-option label="日漫" value="日漫"/>
            <el-option label="国漫" value="国漫"/>
          </el-select>
        </el-form-item>
        <el-form-item label="漫画观看人数" prop="comicWatchNumber">
          <el-input v-model="form.comicWatchNumber" placeholder="请输入漫画观看人数(默认为0)"/>
        </el-form-item>
        <el-form-item label="喜欢人数" prop="comicLikeNumber">
          <el-input v-model="form.comicLikeNumber" placeholder="请输入喜欢人数(默认为0)"/>
        </el-form-item>
        <el-form-item label="付费设置" prop="comicUnlock">
          <el-radio-group v-model="form.comicUnlock">

            <el-radio :label="0">免费</el-radio>
            <el-radio :label="1">金币付费</el-radio>
            <el-radio :label="2">会员免费</el-radio>

          </el-radio-group>
        </el-form-item>
        <el-form-item label=" 解锁一章金币数" prop="comicUnlockGlod">
          <el-input v-model="form.comicUnlockGlod" placeholder="请输入 解锁一章金币数(默认为1)"/>
        </el-form-item>

        <el-form-item label="排序" prop="comicSort" v-show='form.comicTop=="否" || form.comicId==null'>
          <el-input-number v-model="form.comicSort" placeholder="请输入排序" :min="1"/>
        </el-form-item>

        <el-form-item label="漫画创作状态" prop="comicStateType">
          <el-select v-model="form.comicStateType" placeholder="请选择漫画创作状态">
            <el-option label="请选择漫画创作状态" value=""/>
            <el-option label="新作" :value="1"/>
            <el-option label="连载中" :value="2"/>
            <el-option label="已完结" :value="3"/>
          </el-select>
        </el-form-item>

        <el-form-item label="漫画标签" prop="comicTagId">
          <el-select v-model="value1" clearable multiple placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.comicTagId"
              :label="item.comicTagName"
              :value="item.comicTagId">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="title" :visible.sync="open2" width="800px" append-to-body>

      <el-form :model="queryParams1" ref="queryForm1" :inline="true" v-show="showSearch1" label-width="68px">
        <el-form-item label="章节" prop="comicChapterDirectory">
          <el-input
            v-model="queryParams1.comicChapterDirectory"
            placeholder="请输入章节"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="章节名" prop="comicChapterName">
          <el-input
            v-model="queryParams1.comicChapterName"
            placeholder="请输入章节名"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAddChapterNew"
            v-hasPermi="['xqsp:comicChapter:add']"
          >新增
          </el-button>
        </el-col>

        <right-toolbar :showSearch.sync="showSearch1"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="comicChapterList">
        <el-table-column label="章节编号" align="center" prop="comicChapterId"/>
        <el-table-column label=" 漫画id" align="center" prop="comicId"/>
        <el-table-column label="章节" align="center" prop="comicChapterDirectory"/>
        <el-table-column label="章节名" align="center" prop="comicChapterName"/>
        <el-table-column label="章节内容" align="center" :show-overflow-tooltip="true" prop="comicChapterImg"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdateChapter(scope.row)"
              v-hasPermi="['xqsp:comicChapter:edit']"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeleteChapter(scope.row)"
              v-hasPermi="['xqsp:comicChapter:remove']"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total1"
        :page.sync="queryParams1.pageNum"
        :limit.sync="queryParams1.pageSize"
        @pagination="getChapterList"
      />
      <div slot="footer" class="dialog-footer">

        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 添加或修改漫画章节对话框 -->
    <el-dialog :title="title" :visible.sync="open1" width="600px" append-to-body>
      <el-form ref="form1" :model="form1" :rules="rules" label-width="80px">

        <el-form-item label="章节" prop="comicChapterDirectory">
          <el-input v-model="form1.comicChapterDirectory" disabled="true" placeholder="请输入章节"/>
        </el-form-item>
        <el-form-item label="章节名" prop="comicChapterName">
          <el-input v-model="form1.comicChapterName" placeholder="请输入章节名"/>
        </el-form-item>
        <el-form-item label="章节内容" prop="comicChapterImg1">
          <el-input v-model="form1.comicChapterImg" @blur="addImg" placeholder="请输入章节图片"/>
        </el-form-item>
        <div><span style="font-size: 18px;color: red">特别注意：多图拼接最后不能以“,”结尾;必须规范! ! !</span></div>
        <el-form-item label="多图拼接" prop="comicChapterImg2">
          <el-input v-model="form1.comicChapterImg2" :disabled=this.test1 type="textarea" autosize
                    placeholder="多图拼接(特别注意：多图拼接最后不能以“,”结尾)"/>
          <el-button type="info" size="mini" @click="test">修改</el-button>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {
    listComic,
    getComic,
    delComic,
    addComic,
    updateComic,
    exportComic,
    changeUserStatus,
    changeComicTop,
    changeComicSort
  } from "@/api/xqsp/comic";
  import {
    delComicChapter,
    addComicChapter,
    listComicChapter,
    updateComicChapter,
    listComicChapterByComicId,
    getComicChapter
  } from "@/api/xqsp/comicChapter";
  import {listComictag} from "@/api/xqsp/comictag";
  import {getComictag, addComicandtag, updateComicandtag} from "@/api/xqsp/comicandtag";

  export default {
    name: "Comic",
    components: {},
    data() {
      return {
        value1: [],
        options1: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        showSearch1: true,
        // 总条数
        total: 0,
        total1: 0,
        comicChapterDirectory: null,
        test1: true,
        // 漫画操作表格数据
        comicList: [],
        //章节表格数据
        comicChapterList: [],
        comictagList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        open2: false,
        open1: false,
        comicId: '',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          comicName: null,
          comicCoverImg: null,
          comicIntroduce: null,
          comicAuthor: null,
          comicCategory: null,
          comicWatchNumber: null,
          comicLikeNumber: null,
          comicUnlock: null,
          comicTop: null,
          comicUnlockGlod: null,
          comicNewChapter: null,
          comicSort: null,
          comicState: null,
          comicTime: null,
          comicStateType: null
        },
        queryParams1: {
          pageNum: 1,
          pageSize: 10,
          comicId: null,
          comicChapterDirectory: null,
          comicChapterName: null
        },
        // 表单参数
        form: {},
        form1: {},
        rows: {},
        // 表单校验
        rules: {
          comicUnlock: [
            {required: true, message: "观看人数不能为空", trigger: "blur"},

          ],
          comicWatchNumber: [

            {
              pattern: /^[+]{0,1}(\d+)$/,
              message: '请输入正整数',
              trigger: 'blur'
            }
          ],
          comicLikeNumber: [
            {
              pattern: /^[+]{0,1}(\d+)$/,
              message: '请输入正整数',
              trigger: 'blur'
            }
          ],
          comicUnlockGlod: [
            {
              pattern: /^[+]{0,1}(\d+)$/,
              message: '请输入正整数',
              trigger: 'blur'
            }
          ],
          comicChapterDirectory: [
            {required: true, message: "章节不能为空", trigger: "blur"},
            {
              pattern: /^[+]{0,1}(\d+)$/,
              message: '请输入正整数',
              trigger: 'blur'
            }
          ],
          comicChapterImg2: [
            {required: true, message: "章节内容不能为空", trigger: "blur"},
          ],
          comicChapterName: [
            {required: true, message: "章节名不能为空", trigger: "blur"},
          ],

        }
      };
    },
    created() {
      this.getList();
      this.getTagList();
    },
    methods: {
      show(row) {
        getComictag(row.comicId).then(response => {
          this.comictagList = response.data;
        });
      },
      test() {
        if (this.test1 == true) {
          this.test1 = false;
        } else {
          this.test1 = true;
        }

      },

      /** 查询漫画标签列表 */
      getTagList() {
        this.loading = true;
        listComictag(this.queryParams).then(response => {
          this.options1 = response.rows;

        });
      },

      /** 查询漫画章节列表 */
      getChapterList() {
        this.queryParams1.comicId = this.comicId;
        listComicChapterByComicId(this.queryParams1).then(response => {
          this.comicChapterList = response.rows;
          this.total1 = response.total;
          this.open2 = true;
          this.loading = false;
        });
      },

      /** 查询漫画操作列表 */
      getList() {
        this.loading = true;
        listComic(this.queryParams).then(response => {
          this.comicList = response.rows;
          this.comicList.forEach(item => {
            if (item.comicUnlock == 0) {
              item.comicUnlock = "免费"
            } else if (item.comicUnlock == 1) {
              item.comicUnlock = "金币付费"
            } else if (item.comicUnlock == 2) {
              item.comicUnlock = "会员免费"
            }
            if (item.comicStateType == 1) {
              item.comicStateType = "新作"
            } else if (item.comicStateType == 2) {
              item.comicStateType = "连载中"
            } else if (item.comicStateType == 3) {
              item.comicStateType = "已完结"
            }
          });

          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 取消按钮
      cancel2() {
        this.open2 = false;
        this.reset();
      },
      // 取消按钮
      cancel1() {
        this.open1 = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          comicId: null,
          comicName: null,
          comicCoverImg: null,
          comicIntroduce: null,
          comicAuthor: null,
          comicCategory: null,
          comicWatchNumber: null,
          comicLikeNumber: null,
          comicUnlock: null,
          comicTop: null,
          comicUnlockGlod: null,
          comicNewChapter: null,
          comicSort: null,
          comicState: null,
          comicTime: null,
          comicStateType: null,

        };
        this.resetForm("form");
      },
      // 表单重置
      reset1() {
        this.form1 = {
          comicChapterId: null,
          comicId: null,
          comicChapterDirectory: null,
          comicChapterName: null,
          comicChapterImg: null,
          comicChapterImg2: null

        };
        this.resetForm("form1");
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      handleQuery1() {
        this.queryParams1.pageNum = 1;
        this.getChapterList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 重置按钮操作 */
      resetQuery1() {
        this.resetForm("queryForm1");
        this.handleQuery1();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.comicId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;

        this.title = "添加漫画操作";
      },
      addImg() {

        if (this.form1.comicChapterImg2 != null) {
          this.form1.comicChapterImg2 = this.form1.comicChapterImg + "," + this.form1.comicChapterImg2;
        } else {
          this.form1.comicChapterImg2 = this.form1.comicChapterImg
        }

        this.form1.comicChapterImg = "";
      },
      /** 章节操作*/
      handleAddChapter(row) {
        this.reset();

        const comicId = row.comicId;
        this.comicId = comicId;
        this.queryParams1.comicId = comicId;
        listComicChapterByComicId(this.queryParams1).then(response => {
          this.comicChapterList = response.rows;
          this.total1 = response.total;
          this.comicChapterDirectory = response.total + 1;
          this.open2 = true;
          this.loading = false;
        });
        this.title = "漫画章节操作"
        this.comicId = row.comicId;
        this.rows = row;
      },

      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const comicId = row.comicId || this.ids
        getComic(comicId).then(response => {
          this.form = response.data.spComic;
          this.value1 = response.data.value1;
          this.form.comicUnlock = parseInt(response.data.comicUnlock);
          this.open = true;
          this.title = "修改漫画操作";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.comicId != null) {
              updateComic(this.form).then(response => {
                const comicId = this.form.comicId;
                updateComicandtag(this.value1, comicId);
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addComic(this.form).then(response => {

                const comicId = response.data;
                addComicandtag(this.value1, comicId);
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const comicIds = row.comicId || this.ids;
        this.$confirm('是否确认删除漫画操作编号为"' + comicIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delComic(comicIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
      },

      /** 删除章节按钮操作 */
      handleDeleteChapter(row) {
        const comicChapterIds = row.comicChapterId
        this.$confirm('是否确认删除漫画章节编号为"' + comicChapterIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delComicChapter(comicChapterIds);
        }).then(() => {
          this.handleAddChapter(this.rows);
          this.msgSuccess("删除成功");
        })
      },


      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有漫画操作数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return exportComic(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
      },
      // 是否上架
      handleStatusChange(row) {
        let text = row.comicState === 0 ? "上架" : "下架";
        this.$confirm('确认要"' + text + '""' + row.comicName + '"漫画吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return changeUserStatus(row.comicId, row.comicState);
        }).then(() => {
          this.msgSuccess(text + "成功");
        }).catch(function () {
          row.comicState = row.comicState === 0 ? 1 : 0;
        });
      },

      // 是否置顶
      handleTopChange(row) {
        let text = row.comicTop === "是" ? "置顶" : "取消置顶";
        this.$confirm('确认要"' + text + '""' + row.comicName + '"漫画吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return changeComicTop(row.comicId, row.comicTop);

        }).then(function () {
          if (row.comicTop === "否") {
            const comicSort = 1;
            return changeComicSort(row.comicId, comicSort);

          } else if (row.comicTop === "是") {
            const comicSort = 0;
            return changeComicSort(row.comicId, comicSort);

          }
        }).then(() => {
          this.getList();
          this.msgSuccess(text + "成功");

        }).catch(function () {
          row.comicTop = row.comicTop === "否" ? "是" : "否";
        });
      },

      /** 新增章节按钮操作 */
      handleAddChapterNew() {
        this.reset();
        this.reset1();
        this.form1.comicChapterDirectory = this.comicChapterDirectory;
        this.open1 = true;
        this.title = "添加漫画章节";
      },
      /** 修改章节按钮操作 */
      handleUpdateChapter(row) {
        this.reset();
        this.reset1();
        const comicChapterId = row.comicChapterId || this.ids
        getComicChapter(comicChapterId).then(response => {
          this.form1 = response.data;
          this.$set(this.form1, 'comicChapterImg2', response.data.comicChapterImg)
          // this.form1.comicChapterImg2=response.data.comicChapterImg;
          //console.log(response.data.comicChapterImg)
          this.form1.comicChapterImg = "";
          this.open1 = true;
          this.title = "修改漫画章节";
        });
      },
      /** 提交按钮 */
      submitForm1() {
        this.$refs["form1"].validate(valid => {
          if (valid) {
            if (this.form1.comicChapterId != null) {
              this.form1.comicChapterImg = this.form1.comicChapterImg2;
              updateComicChapter(this.form1).then(response => {
                this.msgSuccess("修改成功");
                this.open1 = false;
                this.handleAddChapter(this.rows);
                this.reset1();
              });
            } else {

              this.form1.comicId = this.comicId;
              this.form1.comicChapterImg = this.form1.comicChapterImg2;
              addComicChapter(this.form1).then(response => {
                this.msgSuccess("新增成功");
                this.open1 = false;
                this.handleAddChapter(this.rows);
                this.reset1();
              });
            }
          }
        });
      },


    }
  };
</script>
<style ang="scss">
  .el-tooltip__popper {
    max-width: 300px;
    font-size: 16px;
    background: #000 !important; /*背景色  !important优先级*/
    opacity: 0.8 !important; /*背景色透明度*/
    color: #FFFFFF !important; /*字体颜色*/
  }
</style>
